<template>
    <div class="logistics-form-container"  style="height: 800px;">
      <!-- 顶部表单区域 -->
      <div class="form-header">
        <div class="form-group">
          <label for="deliveryMethod">交货方式：</label>
          <select id="deliveryMethod" v-model="deliveryMethod" style="height: 30px; padding: 4px 8px;">
            <option value="快递物流">快递物流</option>
            <option value="自提">自提</option>
            <option value="送货上门">送货上门</option>
          </select>
        </div>
        <div class="form-group">
          <label for="serviceType">服务类型：</label>
          <select id="serviceType" v-model="serviceType" style="height: 30px; padding: 4px 8px;">
            <option value="物流登记与查询">物流登记与查询</option>
            <option value="退货申请">退货申请</option>
            <option value="换货申请">换货申请</option>
          </select>
        </div>
        <div class="form-group">
          <label for="orderDate">单据日期：</label>
          <input type="date" id="orderDate" v-model="orderDate" style="height: 30px; padding: 4px 8px;">
        </div>
        <div class="form-group">
          <label for="sourceOrderNo">源单编号：</label>
          <input type="text" id="sourceOrderNo" v-model="sourceOrderNo" placeholder="请输入源单编号" style="height: 30px; padding: 4px 8px;">
        </div>
        <div class="form-group">
          <label for="orderNo">单据编号：</label>
          <input type="text" id="orderNo" v-model="orderNo" placeholder="自动生成或填写" disabled style="height: 30px; padding: 4px 8px;">
        </div>
      </div>
      
      <!-- 按钮组 - 移至表格上方 -->
      <div class="btn-group" style="margin: 10px 20px;">
        <button class="btn save-btn" @click="recording">记录</button>
        <button class="btn reset-btn" @click="resetForm">重置</button>
        <button class="btn save-btn" @click="saveForm">保存</button>
        <button class="btn submit-btn" @click="saveAndSubmit">保存并新增</button>
        <button class="btn history-btn" @click="viewHistory">历史单据</button>
        <button class="btn log-btn" @click="viewLog">操作日志</button>
        <!-- 新增选择商品按钮 -->
        <button class="btn select-btn" @click="openGoodsDialog">选择商品</button>
      </div>
  
      <!-- 商品表格区域 - 关键横向滚动条实现 -->
      <div class="table-wrapper">
        <div class="table-section">
          <table class="goods-table">
            <thead>
              <tr>
                <th class="fixed-col">序号</th>
                <th class="fixed-col">操作</th>
                <th>商品</th>
                <th>商品类别</th>
                <th>商品条码</th>
                <th>长(cm)</th>
                <th>宽(cm)</th>
                <th>高(cm)</th>
                <th>体积(cm³)</th>
                <th>总体积</th>
                <th>总重量(kg)</th>
                <th>商品图片</th>
                <th>属性</th>
                <th>单位</th>
                <th>仓库</th>
                <th>发货数量</th>
                <th>商品备注</th>
                <th>产地</th>
                <th>自定义列一</th>
                <th>自定义列二</th>
                <th>自定义列三</th>
                <th>自定义列四</th>
                <th>自定义列五</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(row, index) in tableData" :key="index">
                <td class="fixed-col">{{ index + 1 }}</td>
                <td class="fixed-col">
                  <button class="operate-btn add-btn" @click="addRow(index)">+</button>
                  <button class="operate-btn delete-btn" @click="deleteRow(index)">×</button>
                </td>
                <td>
                  <span v-if="row.goodsName" class="readonly-cell">{{ row.goodsName || '-' }}</span>
                </td>
                <td>
                  <span v-if="row.goodsType" class="readonly-cell">{{ row.goodsType || '-' }}</span>
                </td>
                <td>
                  <span v-if="row.barcode" class="readonly-cell">{{ row.barcode || '-' }}</span>
                </td>
                <td>
                  <span v-if="row.length" class="readonly-cell">{{ row.length || '-' }}</span>
                </td>
                <td>
                  <span v-if="row.width" class="readonly-cell">{{ row.width || '-' }}</span>
                </td>
                <td>
                  <span v-if="row.height" class="readonly-cell">{{ row.height || '-' }}</span>
                </td>
                <td>
                  <span v-if="row.volume" class="readonly-cell">{{ row.volume || '-' }}</span>
                </td>
                <td>
                  <span v-if="row.totalVolume" class="readonly-cell">{{ row.totalVolume || '-' }}</span>
                </td>
                <td>
                  <span v-if="row.totalWeight" class="readonly-cell">{{ row.totalWeight || '-' }}</span>
                </td>
                <td>
                  <div class="readonly-cell" v-if="row.goodsImage">
                    <el-image
                      v-if="row.goodsImage"
                      :src="row.goodsImage"
                      style="width: 40px; height: 40px"
                      fit="cover"
                    />
                  </div>
                </td>
                <td>
                  <span v-if="row.property" class="readonly-cell">{{ row.property || '-' }}</span>
                </td>
                <td>
                  <span v-if="row.unit" class="readonly-cell">{{ row.unit || '-' }}</span>
                </td>
                <td>
                  <span v-if="row.warehouse" class="readonly-cell">{{ row.warehouse || '-' }}</span>
                </td>
                <td>
                  <input 
                    type="number" 
                    v-model.number="row.deliveryQty" 
                    @change="updateRowCalculations(index)"
                    style="height: 24px; padding: 2px 4px; font-size: 12px; width: 60px; text-align: center;"
                  >
                </td>
                <td>
                  <span v-if="row.goodsRemark" class="readonly-cell">{{ row.goodsRemark || '-' }}</span>
                </td>
                <td>
                  <span v-if="row.origin" class="readonly-cell">{{ row.origin || '-' }}</span>
                </td>
                <td>
                  <input 
                    type="text" 
                    v-model="row.custom1" 
                    style="height: 24px; padding: 2px 4px; font-size: 12px; width: 80px; text-align: center;"
                  >
                </td>
                <td>
                  <input 
                    type="text" 
                    v-model="row.custom2" 
                    style="height: 24px; padding: 2px 4px; font-size: 12px; width: 80px; text-align: center;"
                  >
                </td>
                <td>
                  <input 
                    type="text" 
                    v-model="row.custom3" 
                    style="height: 24px; padding: 2px 4px; font-size: 12px; width: 80px; text-align: center;"
                  >
                </td>
                <td>
                  <input 
                    type="text" 
                    v-model="row.custom4" 
                    style="height: 24px; padding: 2px 4px; font-size: 12px; width: 80px; text-align: center;"
                  >
                </td>
                <td>
                  <input 
                    type="text" 
                    v-model="row.custom5" 
                    style="height: 24px; padding: 2px 4px; font-size: 12px; width: 80px; text-align: center;"
                  >
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
  
      <!-- 底部表单区域 - 优化为两行布局 -->
      <div class="form-footer">
        <div class="form-group">
          <label>合计：</label>
          <div class="summary" style="font-size: 12px;">
            <span>总数量: {{ calculateTotal('deliveryQty') }}</span>
            <span>总体积: {{ calculateTotal('totalVolume') }}</span>
            <span>总重量: {{ calculateTotal('totalWeight') }}</span>
          </div>
        </div>
        <div class="form-group">
          <label for="remark">备注信息：</label>
          <textarea id="remark" v-model="remark" placeholder="请输入备注信息" style="height: 60px; padding: 4px 8px;"></textarea>
        </div>
        
        <!-- 优化为两行布局的底部表单 -->
        <div class="bottom-form-wrapper">
          <div class="form-row">
            <div class="form-group-sm">
              <label for="senderAddr" style="font-size: 12px;">寄件地址：</label>
              <input type="text" id="senderAddr" v-model="senderAddr" placeholder="寄件地址" style="height: 30px; padding: 4px 8px; font-size: 12px;">
            </div>
            <div class="form-group-sm">
              <label for="receiverAddr" style="font-size: 12px;">收件地址：</label>
              <input type="text" id="receiverAddr" v-model="receiverAddr" placeholder="收件地址" style="height: 30px; padding: 4px 8px; font-size: 12px;">
            </div>
            <div class="form-group-sm">
              <label for="logisticsCompany" style="font-size: 12px;">物流公司：</label>
              <select id="logisticsCompany" v-model="logisticsCompany" style="height: 30px; padding: 4px 8px; font-size: 12px;">
                <option value="">请选择</option>
                <option value="顺丰">顺丰</option>
                <option value="圆通">圆通</option>
                <option value="中通">中通</option>
                <option value="韵达">韵达</option>
                <option value="申通">申通</option>
              </select>
            </div>
            <div class="form-group-sm">
              <label for="logisticsNo" style="font-size: 12px;">物流单号：</label>
              <input type="text" id="logisticsNo" v-model="logisticsNo" placeholder="物流单号" style="height: 30px; padding: 4px 8px; font-size: 12px;">
            </div>
            <div class="form-group-sm">
              <label for="goodsName" style="font-size: 12px;">物品名称：</label>
              <input type="text" id="goodsName" v-model="goodsName" placeholder="物品名称" style="height: 30px; padding: 4px 8px; font-size: 12px;">
            </div>
          </div>
          
          <div class="form-row">
            <div class="form-group-sm">
              <label for="freightSettlement" style="font-size: 12px;">运费结算：</label>
              <select id="freightSettlement" v-model="freightSettlement" style="height: 30px; padding: 4px 8px; font-size: 12px;">
                <option value="">请选择</option>
                <option value="寄付">寄付</option>
                <option value="到付">到付</option>
                <option value="月结">月结</option>
              </select>
            </div>
            <div class="form-group-sm">
              <label for="actualFreight" style="font-size: 12px;">实际运费：</label>
              <input type="number" id="actualFreight" v-model="actualFreight" placeholder="实际运费" style="height: 30px; padding: 4px 8px; font-size: 12px;">
            </div>
            <div class="form-group-sm">
              <label for="deliveryDate" style="font-size: 12px;">发货日期：</label>
              <input type="date" id="deliveryDate" v-model="deliveryDate" style="height: 30px; padding: 4px 8px; font-size: 12px;">
            </div>
            <div class="form-group-sm">
              <label for="expectedArrival" style="font-size: 12px;">预计到达：</label>
              <input type="date" id="expectedArrival" v-model="expectedArrival" style="height: 30px; padding: 4px 8px; font-size: 12px;">
            </div>
          </div>
        </div>
      </div>
  
      <!-- 选择商品对话框 -->
      <el-dialog title="选择商品" v-model="goodsDialogVisible" width="800px">
        <el-form :model="goodsSearch" inline class="mb-4">
          <el-form-item label="搜索">
            <el-input
              v-model="goodsSearch.keyword"
              placeholder="商品编号/名称/型号/品牌"
              clearable
              @keyup.enter="searchGoods"
            />
          </el-form-item>
          <el-form-item label="仓库">
            <el-select v-model="goodsSearch.warehouse" placeholder="(空)">
              <el-option label="空" value=""></el-option>
              <el-option label="主仓库" value="main"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="goodsSearch.showZeroStock">零库存商品</el-checkbox>
            <el-checkbox v-model="goodsSearch.showForbidden">显示禁用商品</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchGoods">查询</el-button>
            <el-button @click="resetGoodsSearch">刷新</el-button>
            <!-- 新增导入商品按钮 -->
            <el-button type="success" @click="toggleImportArea">
              <i class="el-icon-upload"></i> 导入商品
            </el-button>
          </el-form-item>
        </el-form>
  
        <!-- 导入商品区域 - 默认隐藏 -->
        <div v-if="showImportArea" class="import-area mt-4 p-4 bg-gray-50 rounded-lg">
          <h4 class="mb-3"><i class="el-icon-document"></i> 批量导入商品</h4>
          <el-form :model="importForm" label-width="100px">
            <el-form-item label="导入方式">
              <el-radio-group v-model="importForm.method">
                <el-radio label="file">文件导入</el-radio>
                <el-radio label="text">文本粘贴</el-radio>
              </el-radio-group>
            </el-form-item>
            
            <div v-if="importForm.method === 'file'">
              <el-form-item label="导入文件">
                <el-upload
                  class="upload-demo"
                  action="#"
                  :limit="1"
                  accept=".xlsx,.xls"
                  :auto-upload="false"
                  :on-change="handleImportFileChange"
                  :before-upload="beforeImportFileUpload"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <template #tip>
                    <div class="el-upload__tip">支持 xlsx/xls 格式，最大 5MB</div>
                  </template>
                </el-upload>
              </el-form-item>
            </div>
            
            <div v-if="importForm.method === 'text'">
              <el-form-item label="商品编号">
                <el-input
                  type="textarea"
                  v-model="importForm.textContent"
                  rows="4"
                  placeholder="请输入商品编号，每行一个"
                />
              </el-form-item>
            </div>
            
            <el-form-item>
              <el-button @click="importForm.method = 'file'">使用文件导入</el-button>
              <el-button @click="importForm.method = 'text'">使用文本导入</el-button>
              <el-button type="primary" @click="handleImport">确认导入</el-button>
              <el-button @click="toggleImportArea">取消导入</el-button>
            </el-form-item>
          </el-form>
        </div>
  
        <div class="goods-container">
          <!-- 商品表格 -->
          <div class="goods-table">
            <el-table
              :data="goodsList"
              border
              @selection-change="handleGoodsSelection"
            >
              <el-table-column type="selection" width="50" />
              <el-table-column label="图片" width="60">
                <template #default="scope">
                  <el-image
                    v-if="scope.row.image"
                    :src="scope.row.image"
                    style="width: 40px; height: 40px"
                    fit="cover"
                  />
                  <span v-else class="no-img">无图</span>
                </template>
              </el-table-column>
              <el-table-column prop="code" label="商品编号" width="120" />
              <el-table-column prop="brand" label="品牌" width="100" />
              <el-table-column prop="origin" label="产地" width="100" />
              <el-table-column prop="name" label="商品名称" width="200" />
              <el-table-column label="操作" width="80">
                <template #default="scope">
                  <el-button size="mini" type="primary" @click="addSingleGoods(scope.row)">选择</el-button>
                </template>
              </el-table-column>
            </el-table>
  
            <div class="dialog-footer mt-2">
              <el-pagination
                @size-change="handleGoodsSizeChange"
                @current-change="handleGoodsCurrentChange"
                :current-page="goodsPage.current"
                :page-sizes="[10, 20, 50]"
                :page-size="goodsPage.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="goodsTotal"
                style="float: left"
              ></el-pagination>
            </div>
          </div>
  
          <!-- 商品分类树 -->
          <div class="goods-category">
            <el-tree
              :data="categoryTree"
              :props="treeProps"
              default-expand-all
              show-checkbox
              @check="handleCategoryCheck"
            />
          </div>
        </div>
  
        <div class="dialog-footer mt-4">
          <el-button @click="goodsDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmGoods">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    name: 'LogisticsForm',
    data() {
      return {
        // 基础表单数据
        deliveryMethod: '快递物流',
        serviceType: '物流登记与查询',
        orderDate: new Date().toISOString().split('T')[0],
        sourceOrderNo: '',
        orderNo: 'WL' + new Date().toISOString().split('T')[0].replace(/-/g, '') + '0001',
        tableData: [
          this.createNewRow()
        ],
        remark: '',
        senderAddr: '',
        receiverAddr: '',
        logisticsCompany: '',
        logisticsNo: '',
        goodsName: '',
        freightSettlement: '',
        actualFreight: '',
        deliveryDate: new Date().toISOString().split('T')[0],
        expectedArrival: '',
        
        // 商品选择对话框数据
        goodsDialogVisible: false,
        goodsSearch: {
          keyword: '',
          warehouse: '',
          showZeroStock: false,
          showForbidden: false
        },
        goodsList: [],
        goodsTotal: 0,
        goodsPage: {
          current: 1,
          size: 10
        },
        categoryTree: [],
        treeProps: {
          label: 'name',
          children: 'children'
        },
        selectedGoods: [],
        
        // 导入商品相关数据
        showImportArea: false,
        importForm: {
          method: 'file',
          textContent: '',
          file: null
        }
      }
    },
    methods: {
      // 创建新行数据
      createNewRow() {
        return {
          goodsName: '',
          goodsType: '',
          barcode: '',
          length: '',
          width: '',
          height: '',
          volume: '',
          totalVolume: '',
          totalWeight: '',
          goodsImage: '',
          property: '',
          unit: '',
          warehouse: '',
          deliveryQty: 1,
          goodsRemark: '',
          origin: '',
          custom1: '',
          custom2: '',
          custom3: '',
          custom4: '',
          custom5: ''
        };
      },
      
      // 添加行
      addRow(index) {
        this.tableData.splice(index + 1, 0, this.createNewRow());
      },
      
     recording(){
       this.$router.push({ name: '物流服务记录' });
     },

      // 删除行
      deleteRow(index) {
        if (this.tableData.length > 1) {
          this.tableData.splice(index, 1);
        } else {
          alert('至少保留一行数据');
        }
      },
      
      // 更新行计算
      updateRowCalculations(index) {
        const row = this.tableData[index];
        if (row.deliveryQty && row.volume) {
          row.totalVolume = (parseFloat(row.volume) * parseInt(row.deliveryQty)).toFixed(2);
          row.totalWeight = (parseFloat(row.totalVolume) / 6000).toFixed(2);
        }
      },
      
      // 计算合计
      calculateTotal(field) {
        return this.tableData.reduce((sum, row) => {
          const value = parseFloat(row[field]) || 0;
          return sum + value;
        }, 0).toFixed(2);
      },
      
      // 保存表单
      saveForm() {
        if (!this.sourceOrderNo) {
          alert('请输入源单编号');
          return;
        }
        
        const formData = {
          basicInfo: {
            deliveryMethod: this.deliveryMethod,
            serviceType: this.serviceType,
            orderDate: this.orderDate,
            sourceOrderNo: this.sourceOrderNo,
            orderNo: this.orderNo
          },
          goodsList: this.tableData.map(row => {
            return {
              goodsName: row.goodsName,
              goodsType: row.goodsType,
              barcode: row.barcode,
              length: row.length,
              width: row.width,
              height: row.height,
              volume: row.volume,
              totalVolume: row.totalVolume,
              totalWeight: row.totalWeight,
              goodsImage: row.goodsImage,
              property: row.property,
              unit: row.unit,
              warehouse: row.warehouse,
              deliveryQty: row.deliveryQty,
              goodsRemark: row.goodsRemark,
              origin: row.origin,
              custom1: row.custom1,
              custom2: row.custom2,
              custom3: row.custom3,
              custom4: row.custom4,
              custom5: row.custom5
            };
          }),
          logisticsInfo: {
            senderAddr: this.senderAddr,
            receiverAddr: this.receiverAddr,
            logisticsCompany: this.logisticsCompany,
            logisticsNo: this.logisticsNo,
            goodsName: this.goodsName,
            freightSettlement: this.freightSettlement,
            actualFreight: this.actualFreight,
            deliveryDate: this.deliveryDate,
            expectedArrival: this.expectedArrival
          },
          remark: this.remark
        };
        
        console.log('保存表单数据:', formData);
        alert('表单保存成功！');
      },
      
      // 保存并新增
      saveAndSubmit() {
        this.saveForm();
        this.resetForm();
      },
      
      // 重置表单
      resetForm() {
        this.sourceOrderNo = '';
        this.tableData = [this.createNewRow()];
        this.remark = '';
        this.senderAddr = '';
        this.receiverAddr = '';
        this.logisticsCompany = '';
        this.logisticsNo = '';
        this.goodsName = '';
        this.freightSettlement = '';
        this.actualFreight = '';
        this.deliveryDate = new Date().toISOString().split('T')[0];
        this.expectedArrival = '';
      },
      
      // 查看历史单据
      viewHistory() {
        alert('查看历史单据功能开发中...');
      },
      
      // 查看操作日志
      viewLog() {
        alert('查看操作日志功能开发中...');
      },
      
      // 打开商品选择对话框
      openGoodsDialog() {
        this.goodsDialogVisible = true;
        // 模拟加载商品数据
        this.searchGoods();
      },
      
      // 搜索商品
      searchGoods() {
        // 模拟API请求
        console.log('搜索商品:', this.goodsSearch);
        
        // 模拟返回数据
        this.goodsList = [
          { id: 1, code: 'SP001', name: '苹果手机', brand: 'Apple', origin: '中国', category: '电子产品', length: 15, width: 7, height: 0.8, volume: 84, unit: '台', warehouse: '主仓库', property: '黑色/128G' },
          { id: 2, code: 'SP002', name: '华为手机', brand: 'Huawei', origin: '中国', category: '电子产品', length: 16, width: 7.5, height: 0.9, volume: 108, unit: '台', warehouse: '主仓库', property: '银色/256G' },
          { id: 3, code: 'SP003', name: '小米手机', brand: 'Xiaomi', origin: '中国', category: '电子产品', length: 15.5, width: 7.2, height: 0.85, volume: 95.76, unit: '台', warehouse: '主仓库', property: '蓝色/128G' },
          { id: 4, code: 'SP004', name: '三星手机', brand: 'Samsung', origin: '韩国', category: '电子产品', length: 16.2, width: 7.6, height: 0.92, volume: 112.97, unit: '台', warehouse: '主仓库', property: '黑色/512G' },
          { id: 5, code: 'SP005', name: '笔记本电脑', brand: 'Dell', origin: '美国', category: '电子产品', length: 35, width: 24, height: 2.5, volume: 2100, unit: '台', warehouse: '主仓库', property: 'i7/16G/512G' },
          { id: 6, code: 'SP006', name: '平板电脑', brand: 'Apple', origin: '中国', category: '电子产品', length: 24, width: 17, height: 0.6, volume: 244.8, unit: '台', warehouse: '主仓库', property: '10.9英寸/256G' },
          { id: 7, code: 'SP007', name: '智能手表', brand: 'Apple', origin: '中国', category: '电子产品', length: 4, width: 3.5, height: 1, volume: 14, unit: '块', warehouse: '主仓库', property: '44mm/金色' },
          { id: 8, code: 'SP008', name: '耳机', brand: 'Sony', origin: '日本', category: '电子产品', length: 10, width: 8, height: 5, volume: 400, unit: '副', warehouse: '主仓库', property: '无线降噪' },
          { id: 9, code: 'SP009', name: '相机', brand: 'Canon', origin: '日本', category: '电子产品', length: 13, width: 10, height: 8, volume: 1040, unit: '台', warehouse: '主仓库', property: 'EOS R6' },
          { id: 10, code: 'SP010', name: '打印机', brand: 'HP', origin: '美国', category: '电子产品', length: 40, width: 30, height: 15, volume: 18000, unit: '台', warehouse: '主仓库', property: '彩色激光' }
        ];
        
        this.goodsTotal = 100; // 模拟总记录数
      },
      
      // 重置商品搜索条件
      resetGoodsSearch() {
        this.goodsSearch = {
          keyword: '',
          warehouse: '',
          showZeroStock: false,
          showForbidden: false
        };
        this.searchGoods();
      },
      
      // 处理商品选择
      handleGoodsSelection(selection) {
        this.selectedGoods = selection;
      },
      
      // 处理分页大小变化
      handleGoodsSizeChange(size) {
        this.goodsPage.size = size;
        this.searchGoods();
      },
      
      // 处理当前页码变化
      handleGoodsCurrentChange(current) {
        this.goodsPage.current = current;
        this.searchGoods();
      },
      
      // 处理分类树选择
      handleCategoryCheck(data, checked, indeterminate) {
        console.log('分类树选择:', data, checked, indeterminate);
        // 这里可以添加根据分类筛选商品的逻辑
      },
      
      // 确认选择商品
      confirmGoods() {
        if (this.selectedGoods.length === 0) {
          alert('请先选择商品');
          return;
        }
        
        // 将选择的商品添加到表格中
        this.selectedGoods.forEach(goods => {
          const newRow = this.createNewRow();
          newRow.goodsName = goods.name;
          newRow.barcode = goods.code;
          newRow.goodsType = goods.category;
          newRow.goodsImage = goods.image;
          newRow.brand = goods.brand;
          newRow.origin = goods.origin;
          newRow.length = goods.length;
          newRow.width = goods.width;
          newRow.height = goods.height;
          newRow.volume = goods.volume;
          newRow.unit = goods.unit;
          newRow.warehouse = goods.warehouse;
          newRow.property = goods.property;
          newRow.totalVolume = goods.volume;
          newRow.totalWeight = (goods.volume / 6000).toFixed(2); // 简单计算，体积重量(kg)=体积(cm³)/6000
          
          this.tableData.push(newRow);
        });
        
        this.goodsDialogVisible = false;
        this.$message({
          type: 'success',
          message: `成功添加 ${this.selectedGoods.length} 个商品`
        });
      },
      
      // 添加单个商品
      addSingleGoods(goods) {
        const newRow = this.createNewRow();
        newRow.goodsName = goods.name;
        newRow.barcode = goods.code;
        newRow.goodsType = goods.category;
        newRow.goodsImage = goods.image;
        newRow.brand = goods.brand;
        newRow.origin = goods.origin;
        newRow.length = goods.length;
        newRow.width = goods.width;
        newRow.height = goods.height;
        newRow.volume = goods.volume;
        newRow.unit = goods.unit;
        newRow.warehouse = goods.warehouse;
        newRow.property = goods.property;
        newRow.totalVolume = goods.volume;
        newRow.totalWeight = (goods.volume / 6000).toFixed(2); // 简单计算，体积重量(kg)=体积(cm³)/6000
        
        this.tableData.push(newRow);
        
        this.$message({
          type: 'success',
          message: `成功添加商品: ${goods.name}`
        });
      },
      
      // 切换导入区域显示状态
      toggleImportArea() {
        this.showImportArea = !this.showImportArea;
        if (!this.showImportArea) {
          // 隐藏时重置表单
          this.importForm = {
            method: 'file',
            textContent: '',
            file: null
          };
        }
      },
      
      // 处理导入文件变化
      handleImportFileChange(file) {
        this.importForm.file = file;
      },
      
      // 导入文件上传前校验
      beforeImportFileUpload(file) {
        const isExcel = file.type === 'application/vnd.ms-excel' || 
                        file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        const isLt5M = file.size / 1024 / 1024 < 5;
        
        if (!isExcel) {
          this.$message.error('请上传Excel文件');
          return false;
        }
        if (!isLt5M) {
          this.$message.error('文件大小不能超过5MB');
          return false;
        }
        return true;
      },
      
      // 处理导入操作
      handleImport() {
        if (this.importForm.method === 'file' && !this.importForm.file) {
          this.$message.error('请先上传文件');
          return;
        }
        
        if (this.importForm.method === 'text' && !this.importForm.textContent.trim()) {
          this.$message.error('请输入商品编号');
          return;
        }
        
        // 模拟导入逻辑
        if (this.importForm.method === 'text') {
          // 从文本中获取商品编号
          const codes = this.importForm.textContent.trim().split('\n');
          
          // 模拟根据商品编号查询商品
          const importedGoods = codes.map((code, index) => {
            // 从已有商品列表中查找，没有则创建一个默认商品
            const existingGoods = this.goodsList.find(g => g.code === code);
            if (existingGoods) {
              return existingGoods;
            }
            
            return {
              id: 100 + index,
              code: code,
              name: `商品${code}`,
              brand: '默认品牌',
              origin: '默认产地',
              image: `https://picsum.photos/200/200?random=${index + 20}`,
              category: '未分类',
              length: 10,
              width: 10,
              height: 10,
              volume: 1000,
              unit: '件',
              warehouse: '主仓库',
              property: '默认属性'
            };
          });
          
          // 添加到表格
          importedGoods.forEach(goods => {
            const newRow = this.createNewRow();
            newRow.goodsName = goods.name;
            newRow.barcode = goods.code;
            newRow.goodsType = goods.category;
            newRow.goodsImage = goods.image;
            newRow.brand = goods.brand;
            newRow.origin = goods.origin;
            newRow.length = goods.length;
            newRow.width = goods.width;
            newRow.height = goods.height;
            newRow.volume = goods.volume;
            newRow.unit = goods.unit;
            newRow.warehouse = goods.warehouse;
            newRow.property = goods.property;
            newRow.totalVolume = goods.volume;
            newRow.totalWeight = (goods.volume / 6000).toFixed(2);
            
            this.tableData.push(newRow);
          });
          
          this.$message({
            type: 'success',
            message: `成功导入 ${importedGoods.length} 个商品`
          });
        } else {
          // 文件导入逻辑
          this.$message({
            type: 'success',
            message: '文件导入功能正在处理中...'
          });
        }
        
        // 导入完成后隐藏导入区域
        this.toggleImportArea();
        this.goodsDialogVisible = false;
      }
    }
  }
  </script>
  
  <style scoped>
  /* 基础样式 */
  .logistics-form-container {
    width: 100%;
    max-width: 1600px;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  
  .form-header,
  .form-footer {
    padding: 12px 16px;
  }
  
  .form-header {
    border-bottom: 1px solid #ebeef5;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .form-footer {
    border-top: 1px solid #ebeef5;
  }
  
  .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    min-width: 200px;
  }
  
  .form-group label {
    font-size: 12px;
    color: #606266;
    margin-bottom: 4px;
  }
  
  .form-group select,
  .form-group input,
  textarea {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    color: #606266;
    transition: border-color 0.2s;
  }
  
  .form-group select:focus,
  .form-group input:focus,
  textarea:focus {
    outline: none;
    border-color: #409eff;
  }
  
  textarea {
    width: 100%;
    resize: none;
  }
  
  /* 表格区域 - 关键横向滚动条实现 */
  .table-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  
  .table-section {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 300px;
    -webkit-overflow-scrolling: touch;
  }
  
  .goods-table {
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    text-align: center;
  }
  
  .goods-table th,
  .goods-table td {
    border: 1px solid #ebeef5;
    padding: 8px 6px;
    font-size: 13px;
    color: #606266;
    white-space: nowrap;
    min-width: 100px;
  }
  
  .goods-table th {
    font-weight: 500;
    background-color: #f5f7fa;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  
  /* 固定列样式 */
  .fixed-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fff;
  }
  
  .goods-table th.fixed-col {
    background-color: #f5f7fa;
  }
  
  /* 操作按钮样式 */
  .operate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin: 0 1px;
    transition: all 0.2s;
    color: #fff;
    font-size: 10px;
  }
  
  .add-btn {
    background-color: #67c23a;
  }
  
  .delete-btn {
    background-color: #f56c6c;
  }
  
  .operate-btn:hover {
    opacity: 0.85;
  }
  
  /* 只读单元格样式 */
  .readonly-cell {
    display: inline-block;
    padding: 4px 6px;
    border: 1px solid #ebeef5;
    border-radius: 3px;
    min-width: 60px;
    text-align: center;
    background-color: #fafafa;
    font-size: 12px;
    color: #606266;
    cursor: not-allowed;
  }
  
  /* 底部表单样式 - 优化为两行 */
  .bottom-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .form-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  .form-group-sm {
    flex: 1;
    min-width: 180px;
    max-width: 240px;
  }
  
  .form-group-sm label {
    font-size: 11px;
    margin-bottom: 2px;
  }
  
  .summary {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: #303133;
  }
  
  .summary span {
    margin-right: 15px;
  }
  
  /* 按钮组样式 */
  .btn-group {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
  }
  
  .btn {
    padding: 6px 12px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
  }
  
  .reset-btn {
    background-color: #909399;
    color: #fff;
  }
  
  .save-btn {
    background-color: #409eff;
    color: #fff;
  }
  
  .submit-btn {
    background-color: #67c23a;
    color: #fff;
  }
  
  .history-btn,
  .log-btn,
  .select-btn {
    background-color: #e6a23c;
    color: #fff;
  }
  
  .btn:hover {
    opacity: 0.85;
  }
  
  /* 滚动条样式优化 */
  .table-section::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  .table-section::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  .table-section::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }
  
  .table-section::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
  
  /* 选择商品对话框样式 */
  .goods-container {
    display: flex;
    gap: 20px;
  }
  
  .goods-table {
    flex: 3;
  }
  
  .goods-category {
    flex: 1;
    border-left: 1px solid #ebeef5;
    padding-left: 20px;
  }
  
  .dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
  }
  
  .no-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 12px;
    color: #909399;
  }
  
  /* 导入商品区域样式 */
  .import-area {
    border: 1px dashed #dcdfe6;
    margin-bottom: 20px;
    border-radius: 6px;
  }
  
  .import-area h4 {
    display: flex;
    align-items: center;
    margin-top: 0;
    color: #606266;
    font-size: 14px;
    font-weight: 500;
  }
  
  .import-area h4 i {
    margin-right: 8px;
    color: #409eff;
  }
  
  /* 响应式调整 */
  @media (max-width: 1200px) {
    .form-row {
      flex-direction: column;
    }
    
    .form-group-sm {
      max-width: 100%;
    }
    
    .goods-container {
      flex-direction: column;
    }
    
    .goods-category {
      border-left: none;
      border-top: 1px solid #ebeef5;
      padding-left: 0;
      padding-top: 20px;
    }
  }
  </style>